<template>
  <div>
    <v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
      <div class="menu-container" ref="menuContainer">
        <div class="content-border" @dblclick="handleFullScreen">
          <div>
            <div class="header-title">
              <div class="header-logo">
                <img src="../../assets/logo.png" class="header-logo-img" alt="">
                <div style="position: absolute;left: 100px;">
                  <el-date-picker
                    v-model="value4"
                    type="month" format="M 月"
                    placeholder="选择月">
                  </el-date-picker>
                </div>
              </div>
              <div class="header-header-title">
                <div class="text-width" @click.stop="fileVerify = true">
                  <span style="font-weight: bold;">SDCA看板</span>
                  <div class="file-div" v-if="fileVerify">
                    <select-page @selects="selectsFun"></select-page>
                  </div>
                </div>
              </div>
              <div class="header-vpo">
                <div class="header-organ">{{organName}}</div>
                <div class="quit" @click="quit">退出</div>
                <img src="../../assets/aa.jpg" class="header-logo-img"
                     style="height: 57px;position:absolute;right: 11px;top: -10px;" alt="">
                <!--                <img src="../../assets/right.jpg" class="header-logo-img" alt="">-->
              </div>
            </div>
            <!--echarts-->
            <div style="display: flex;z-index: 9;justify-content: space-between;">
              <div style="width: 30vw;height: 230px;position: relative">
                <div class="echart-header-title">
                  <div>GLY跟踪表</div>
                  <!--                  <div @click="echartck">{{echartsValue}}<i class="el-icon-caret-bottom"></i></div>-->
                  <div class="echart-header-select" v-if="echartListVerify">
                    <div v-for="item in echartList" @click="echartOptionCk(item.value)">{{item.label}}</div>
                  </div>
                </div>
                <i class="el-icon-circle-plus-outline" style="position: absolute;top: 27px;right: 30px;z-index:998"
                   @click="addEchart()"></i>
                <i class="el-icon-rank" style="position: absolute;top: 27px;right: 10px;z-index:998"
                   @click="amplification('frist')"></i>
                <div id="gly-echarts"></div>
              </div>
              <div style="width: 30vw;height: 230px;position: relative">
                <div class="echart-header-title">
                  <div>LEF跟踪表</div>
                  <!--                  GLY跟踪表-->
                </div>
                <i class="el-icon-rank" style="position: absolute;top: 27px;right: 10px;z-index:998"
                   @click="amplification('two')"></i>
                <div id="lef-echarts"></div>
              </div>
              <div style="width: 30vw;height: 230px;position: relative">
                <div class="echart-header-title">
                  <div>产量</div>
                  <!--                  GLY跟踪表-->
                </div>
                <i class="el-icon-rank" style="position: absolute;top: 27px;right: 10px;z-index:998"
                   @click="amplification('three')"></i>
                <div id="yield-echarts"></div>
              </div>
            </div>
            <div class="big-echarts">
              <div class="tab-echarts">
                <div style="display: flex">
                  <!--                  <div class="tab-echarts-title" :class="echartTabIndex === index ? 'echartsActive' : ''" v-for="(item,index) in echartTab" @click="tabFrist(item.value,index)">{{item.label}}</div>-->
                </div>
                <!--                <el-select v-model="selects" size="mini" @change="tabChange">-->
                <!--                  <el-option v-for="(item,index) in echartTab" :label="item.label" :value="item.value" :key="index"></el-option>-->
                <!--                </el-select>-->
              </div>
              <div class="tab-echarts" style="left: 420px;">
                <div style="display: flex">
                  <!--                  <div class="tab-echarts-title" :class="index === 1 ? 'echartsActive' : ''" v-for="(item,index) in echartTab">{{item.label}}</div>-->
                </div>
                <!--                <el-select v-model="selectsTwo" size="mini" @change="tabChangeTwo" >-->
                <!--                  <el-option v-for="(item,index) in echartTab" :label="item.label" :value="item.value" :key="index"></el-option>-->
                <!--                </el-select>-->
              </div>
              <div class="tab-echarts" style="left: 860px;">
                <div style="display: flex">
                  <!--                  <div class="tab-echarts-title" :class="index === 0 ? 'echartsActive' : ''" v-for="(item,index) in echartTab">{{item.label}}</div>-->
                </div>
                <!--                <el-select v-model="selectsThree" size="mini" @change="tabChangeThree" >-->
                <!--                  <el-option v-for="(item,index) in echartTab" :label="item.label" :value="item.value" :key="index"></el-option>-->
                <!--                </el-select>-->
              </div>
              <div id="zhengtai" v-show="fristZheng"></div>
              <div id="frist-xiang" v-show="fristXiang"></div>
              <div id="frist-bing" v-show="fristBing"></div>
              <div id="xiangxian"></div>
              <div id="zhengtaitwo"></div>
            </div>
            <!--5s关注点-->
            <div class="last-table-content">
              <div>
                <div v-for="(item,index) in tabLeft" :key="index"
                     :class="tabLeftIndex === index ? 'tab-left' : 'tab-left-active'" @click="tabLefts(index)">{{item}}
                </div>
              </div>
              <!--表格内容-->
              <div class="table-right" v-if="tabFor">
                <div class="table-center-title">
                  <div>
                    <div>SDCA 循环使用跟踪</div>
                    <div style="margin-top: -3px;">SDCA Cycle Use Tracking</div>
                  </div>
                </div>
                <div style="height: 149px;overflow: hidden">
                  <table style="width: 100%; border-collapse:collapse;">
                    <tr>
                      <td v-for="item in title" class="tds">{{item}}</td>
                    </tr>
                    <tr v-for="item in piSdcaUseTrackingList">
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.equipProcessKpi">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.fiveW">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.at">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.owd">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.training">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.sopOpl">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.reactionPlan">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.processMap">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.checklist">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.pmPlan">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.equipBom">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.spraeParts">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                               v-model="item.dmr">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaChange(item)" class="sdcaxh"
                                                         v-model="item.sic">
                      </td>
                    </tr>
                    <tr v-for="item in piSdcaUseTrackingNum">
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.equipProcessKpi">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.fiveW">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.at">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.owd">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.training">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.sopOpl">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.reactionPlan">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.processMap">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.checklist">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.pmPlan">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.equipBom">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.spraeParts">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.dmr">
                      </td>
                      <td class="td-content">
                        <input type="text" @change="sdcaAddChange(item)" class="sdcaxh"
                               v-model="item.sic">
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
              <!--                          <div class="table-content"v-if="!tabFive">-->
              <div class="table-left" v-if="tabAddress">
                <div class="table-left-title">
                  <div class="table-left-title-left">
                    <div>5S区域</div>
                    <div style="margin-top: -3px;">5S Area</div>
                  </div>
                  <div class="table-left-title-center">
                    <div>5S预算分数</div>
                    <div style="margin-top: -3px;">5S Budget scores</div>
                  </div>
                  <div class="table-left-title-right">
                    <div>5S审计分数</div>
                    <div style="margin-top: -3px;">5S Audit score</div>
                  </div>
                </div>
                <div v-for="item in piFivesScoresList">
                  <div class="table-left-content">
                    <section class="table-left-content-left">
                      <input type="text" class="sdcaxh" @change="pifChange(item)"
                             v-model="item.area">
                    </section>
                    <section class="table-left-content-center">
                      <input type="text" class="sdcaxh"
                             @change="pifChange(item)" v-model="item.scores">
                    </section>
                    <section class="table-left-content-right">
                      <input type="text" class="sdcaxh"
                             @change="pifChange(item)"
                             v-model="item.auditScore">
                    </section>
                  </div>
                </div>
                <div v-for="item in piFivesScoresNum">
                  <div class="table-left-content">
                    <section class="table-left-content-left">
                      <input type="text" class="sdcaxh"
                             @change="pifAddChange(item)" v-model="item.area">
                    </section>
                    <section class="table-left-content-center">
                      <input type="text" class="sdcaxh"
                             @change="pifAddChange(item)"
                             v-model="item.scores">
                    </section>
                    <section class="table-left-content-right">
                      <input type="text" class="sdcaxh"
                             @change="pifAddChange(item)"
                             v-model="item.auditScore">
                    </section>
                  </div>
                </div>
              </div>
              <div class="table-center" v-if="tabAddress" style="margin-left: 10px">
                <div class="table-center-title">
                  <div>
                    <div>异常触发条件</div>
                    <div style="margin-top: -3px;">Abnormality Triggers</div>
                  </div>
                </div>
              </div>

              <!--                          </div>-->


              <div class="last-table-left" v-if="tabFive">
                <div class="table-center-title">
                  <div>
                    <div>5S关注点</div>
                    <div style="margin-top: -3px;">5S Hot Spots</div>
                  </div>
                </div>
                <div class="last-table-left-content">
                  <table style="border-collapse:collapse;width: 100%;">
                    <tr>
                      <td class="last-td" v-for="item in lastTd">
                        <div class="table-center-title" style="background-color: #1a8dc4">
                          <div>
                            <div>{{item.label}}</div>
                            <div style="margin-top: -3px;">{{item.value}}</div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr v-for="item in TeamhotSpotsList">
                      <td class="last-td-content" @click="txtck(item.topic)">{{item.topic}}</td>
                      <td class="last-td-content" @click="txtck(item.actionPlan)">{{item.actionPlan}}</td>
                      <td class="last-td-content">{{item.wener}}</td>
                      <td class="last-td-content">{{item.dueDate}}</td>
                      <td class="last-td-content">{{item.status == 'YES' ? "已处理" : "未处理"}}</td>
                    </tr>
                    <tr v-for="items in numlist">
                      <td class="last-td-content"></td>
                      <td class="last-td-content"></td>
                      <td class="last-td-content"></td>
                      <td class="last-td-content"></td>
                      <td class="last-td-content"></td>
                    </tr>
                  </table>
                </div>
              </div>
              <div class="last-table-center" v-if="tabFive">
                <div class="table-center-title">
                  <div>
                    <div>异常报告</div>
                    <div style="margin-top: -3px;">Completed Ab Reports</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer-page :serialnumber="serialnumber" :timevalue="timevalue"></footer-page>
      </div>
      <div class="posfixed" @click="posf" v-show="apcVerify">
        <div class="echarts-content" @click.stop="">
          <div class="echarts-title">
            <div class="echarts-title-name">GLY跟踪表</div>
            <!--            <div class="echarts-error">-->
            <!--              <div>-->
            <!--                <div class="echarts-error-content" v-for="(item,index) in echartsError">-->
            <!--                  <div class="echarts-error-index">{{index + 1}}</div>-->
            <!--                  {{item}}-->
            <!--                </div>-->
            <!--              </div>-->
            <!--              <el-button type="danger" size="mini" style="margin: 10px 20px;">分析问题</el-button>-->
            <!--            </div>-->
          </div>
          <div id="echarts" v-if="fristTop"></div>
          <div id="echarts-two" v-if="twoTop"></div>
          <div id="echarts-three" v-if="threeTop"></div>
          <div style="margin-top: 2vh;margin-bottom: 5vh">
            <div style="display: flex;position: absolute">
              <!--              <div class="tab-echarts-title" :class="echartTabBigIndex === index ? 'echartsActive' : ''" v-for="(item,index) in echartTab" @click="tabBingFrist(item.value,index)">{{item.label}}</div>-->
            </div>
            <img src="../../assets/close.png" @click="posf" alt="" style="width: 40px;height: 40px;margin-left: -20vw;">
          </div>
          <div id="echarts-footer" v-show="frist"></div>
          <!--          <div id="echarts-footer-tab" v-show="bigOne"></div>-->
          <!--          <div id="echarts-footer-tabTwo" v-show="bigTwo"></div>-->
          <div id="echarts-footer-two" v-show="two"></div>
          <div id="echarts-footer-three" v-show="three"></div>
          <div class="dates">
            <div v-for="(item,index) in dateList" @click="dateCk(index)" :class="tabIndex == index ? 'bcg' : ''">
              {{item}}
            </div>
          </div>
        </div>
      </div>
    </v-touch>
    <div class="loadings" @click.stop="txtVerify = false;" v-if="txtVerify">
      <div class="txt" @click.stop="">{{txt}}</div>
    </div>
    <el-dialog
      title=""
      :visible.sync="centerDialogVisible"
      width="1200px"
      center>
      <iframe width="100%" height="550px"
              src='http://47.105.123.244:8081/ATNew/Edit/OtherPageIn?mId=""&createdBy=12249&brewery=90012691&department=10021844&area=100038&classNum=2&device=5826&triggerCondition=2112&piInfo=64B21FD4-7917-40F7-ACD2-E9C970969FA7&secretKey=rrgSUdYhz3oM0c8swVCWKA==&productLine=2'
              frameborder="0"></iframe>
    </el-dialog>
    <el-dialog
      title="添加"
      :visible.sync="addVisible"
      width="1000px" height="800px"
      center>
      <echart-add @cencelFn="cancelFun" @saveFn="saveFun"></echart-add>
    </el-dialog>
  </div>
</template>

<script>
  import selectPage from './select'
  import echartAdd from './echartsadd/add'
  import footerPage from './basic/footer'

  export default {
    name: "packaging",
    components: {
      selectPage,
      echartAdd,
      footerPage
    },
    data() {
      return {
        serialnumber: 5,
        timevalue: "",
        selects: "zheng",//第一个图标select绑定值
        selectsTwo: "xiang",//第二个图标select绑定值
        selectsThree: "zheng",//第三个图标select绑定值
        echartTab: [{label: "正态", value: "zheng"}, {label: "箱线", value: "xiang"}, {label: "饼图", value: "bing"}],//图标select绑定数组
        echartTabBigIndex: 0,
        addVisible: false,
        centerDialogVisible: false,
        echartsError: ["6号到11号连续超标", "14号到18号波动下降", "23号到28号波动频繁", "27号到31号波动上涨"],//放大echarts内的问题
        echartsValue: "LEF跟踪表",//头部下拉
        echartListVerify: false,
        echartList: [{label: "LEF跟踪表", value: "LEF跟踪表"}, {label: "GLY跟踪表", value: "GLY跟踪表"}],
        value4: "",//当前月份
        fileVerify: false,//头部下拉
        fullscreen: false,//左右滑切换判断条件
        apcVerify: false,//图表放大弹框容器
        apcContentVerify: true,
        frist: false,//第一个图表显示隐藏判断条件
        two: false,//第二个图表显示隐藏判断条件
        three: false,//第三个图表显示隐藏判断条件
        fristTop: false,
        twoTop: false,
        threeTop: false,
        // val: 1,
        // colo: "yellow",
        // week: "",
        dateList: ["按周", "按月", "按年"],//弹框图表内右侧tab
        tabIndex: 1,//弹框图表内右侧tab下标
        title: ["Equip/Process/KPI", "5W", "AT", "OWD", "Training", "SOP/OPL", "Reaction Plan", "Process Map", "Checklist", "PM Plan", "Equip BOM", "Sprae parts", "DMR", "SIC"],//循环使用跟踪列表表头
        lastTd: [{label: '主题', value: 'Topic'}, {label: '行动计划', value: 'Action Plan'}, {
          label: '责任人',
          value: 'Owner'
        }, {label: '完成时间', value: 'Due Date'}, {label: '备注', value: 'Remark'}],//5s关注点列表表头
        piFivesScoresList: [],//5S区域
        piFivesScoresNum: [],//5s区域剩余单元格
        piSdcaUseTrackingList: [],//sdca循环使用跟踪列表
        piSdcaUseTrackingNum: [],//sdca循环使用跟踪列表剩余单元格,
        TeamhotSpotsList: [],//5s关注点
        numlist: [],//5s剩余单元格
        txtVerify: false,//线重点关注
        txt: "",//弹框内数据
        value1: "",//当前时间
        actual: [],//第一个图表数据
        target: [],//第一个图表数据
        challenge: [],//第一个图表数据
        tdArr: [],//第一个图表数据
        tdMArr: [],//第一个图表数据
        tdWArr: [],//第一个图表数据
        xarr: [],//第一个x轴
        tabLeft: ["SDCA Matrix", "5S区域", "5S关注点"],
        tabLeftIndex: 0,
        tabAddress: false,
        tabFor: true,
        tabFive: false,
        organName: "",
        fristXiang: false,//第二行第一个箱线图
        fristZheng: true,//第二行第一个正态图
        fristBing: false,//第二行第一个饼图
        echartTabIndex: 0,
        fristBigXiang: false,
        fristBigZheng: true,
        fristBigBing: false,
      }
    },
    created() {
      // this.isTimeOut();
    },
    mounted() {
      this.organName = JSON.parse(localStorage.getItem("userInfo")).userInfo.organName
      this.value1 = this.getNowFormatDate();
      this.timevalue = this.value1;
      var date = new Date().getMonth() + 1;
      date = date < 10 ? "0" + date : date;
      this.value4 = date;
      // 获取线重点关注
      this.getSpot();
      // 获取5s区域
      this.piFivesScores();
      // 获取sdca循环使用跟踪列表
      this.piSdcaUseTracking()
      // let myCharts = this.$echarts.init(document.getElementById('echarts'));
      // this.fristEcharts(myCharts)
      let glyCharts = this.$echarts.init(document.getElementById('gly-echarts'));
      let arrGly = [{
        name: 'Actual',
        type: 'line',
        smooth: true,
        data: [96.39, 93.55, 90.40, 92.29, 92.71, 75.72, 62.38, 83.43, 85.55, 85.55, 60.68, 88.2, 39.87, 14.34, 86.09, 91.02, 91.02, 53.53, 81.9, 86.31, 86.31, 79.14, 47.71, 81.46, 79.89, 61.74, 90.72, 84.82, 83.79, 84.82, 83.79]
      },
        {
          name: 'Target(73.5)',
          type: 'line',
          smooth: true,
          symbol: 'none',
          data: [73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5]
        },

        {
          name: 'Challenge(75)',
          type: 'line',
          stack: '总量',
          symbol: 'none',
          data: [75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75]
        }, {
          name: 'YTD',
          type: 'bar',
          barWidth: 5,
          smooth: true,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73.62],
          // itemStyle: {
          //   color: 'green',
          // }
        }, {
          name: 'MTD',
          type: 'bar',
          barWidth: 5,
          smooth: true,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77.41],
          // itemStyle: {
          //   color: 'blue',
          // }
        }, {
          name: 'WTD',
          type: 'bar',
          barWidth: 5,
          smooth: true,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 80.23],
          // itemStyle: {
          //   color: 'red',
          // }
        }]
      let lengDataGly = ['Actual', 'Target(73.5)', 'Challenge(75)', "WTD", "MTD", "YTD"]
      this.fristEchartsDatas(glyCharts, lengDataGly, arrGly)
      // this.fristEcharts(twoCharts)
      // let bigTwoCharts = this.$echarts.init(document.getElementById('echarts-two'));
      // this.fristEcharts(bigTwoCharts)
      let yieldmyChart = this.$echarts.init(document.getElementById('yield-echarts'));
      // this.fristEcharts(threemyChart)
      let arrYield = [{
        name: 'Actual',
        type: 'line',
        smooth: true,
        data: [4256.58, 4256.58, 3992.28, 4075.74, 4094.35, 3343.85, 3410.78, 3604.17, 3695.81, 2495.23, 2621.37, 3810.24, 1220.07, 401.76, 3615.84, 3823.2, 3654.72, 2254.36, 3538.08, 3728.59, 3728.59, 3418.84, 3418.84, 3418.84, 3355.38, 2726.43, 4006.19, 3745.87, 3745.87, 3745.87, 3745.87]
      },
        {
          name: 'Target(114396)',
          type: 'line',
          smooth: true,
          symbol: 'none',
          data: [114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396]
        }, {
          name: 'YTD',
          type: 'bar',
          barWidth: 5,
          smooth: true,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 441191.86],
          // itemStyle: {
          //   color: 'green',
          // }
        }, {
          name: 'MTD',
          type: 'bar',
          barWidth: 5,
          smooth: true,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 94826.9],
          // itemStyle: {
          //   color: 'blue',
          // }
        }, {
          name: 'WTD',
          type: 'bar',
          barWidth: 5,
          smooth: true,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 19876.39],
          // itemStyle: {
          //   color: 'red',
          // }
        }

        // {
        //   name: 'Challenge(90)',
        //   type: 'line',
        //   stack: '总量',
        //   symbol: 'none',
        //   data: [90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90]
        // }
      ]
      let lengDataYield = ['Actual', 'Target(114396)', 'Challenge(90)', "WTD", "MTD", "YTD"]
      this.fristEchartsDatas(yieldmyChart, lengDataYield, arrYield)
      // this.fristEcharts(threemyChart)
      // let bigthreemyChart = this.$echarts.init(document.getElementById('echarts-three'));
      // this.fristEcharts(bigthreemyChart)

      // 正态分布图
      let zhengtaimyChart = this.$echarts.init(document.getElementById('zhengtai'));
      // this.zhengtai(zhengtaimyChart)
      this.falls(zhengtaimyChart)
      let fristXiang = this.$echarts.init(document.getElementById('frist-xiang'));
      this.Experiment(fristXiang)
      // 饼图
      let fristBing = this.$echarts.init(document.getElementById('frist-bing'));
      this.simple(fristBing)
      // xiangxian
      let xiangxian = this.$echarts.init(document.getElementById('xiangxian'));
      // this.Experiment(xiangxian)
      this.zhengtai(xiangxian)
      let zhengtaimyChartTwo = this.$echarts.init(document.getElementById('zhengtaitwo'));
      // this.zhengtai(zhengtaimyChartTwo)
      this.simple(zhengtaimyChartTwo)
      // let echartsFooter = this.$echarts.init(document.getElementById('echarts-footer'));
      // this.zhengtai(echartsFooter)
      // let echartsFooterTwo = this.$echarts.init(document.getElementById('echarts-footer-two'));
      // this.zhengtai(echartsFooterTwo)
      // let echartsFooterThree = this.$echarts.init(document.getElementById('echarts-footer-three'));
      // this.zhengtai(echartsFooterThree)
      let that = this;
      let formDate = new FormData();
      formDate.append('month', 7);
      that.$post('pi/report/lef', formDate)
        .then((response) => {
          let actual = [];
          let xarr = [];
          let target = [];
          let challenge = [];
          let tdArr = [];
          let tdMArr = [];
          let tdWArr = [];
          for (let i = 0; i < response.data.actual.length; i++) {
            actual.push(response.data.actual[i].actual);
          }
          for (let i = 0; i < response.data.target.length; i++) {
            target.push(response.data.target[i].target);
          }
          for (let i = 0; i < response.data.challenge.length; i++) {
            challenge.push(response.data.challenge[i].challenge);
          }
          for (let i = 0; i < response.data.td.length; i++) {
            //tdArr.push(response.data.td[i].actual);
            xarr.push(response.data.td[i].num);
            if (response.data.td[i].num == "YTD") {
              tdArr.push(response.data.td[i].actual);
            } else {
              tdArr.push(0);
            }

            if (response.data.td[i].num == "MTD") {
              tdMArr.push(response.data.td[i].actual);
            } else {
              tdMArr.push(0);
            }

            if (response.data.td[i].num == "WTD") {
              tdWArr.push(response.data.td[i].actual);
            } else {
              tdWArr.push(0);
            }
          }
          that.actual = actual;
          that.target = target;
          that.challenge = challenge;
          that.tdArr = tdArr;
          that.xarr = xarr;
          that.tdMArr = tdMArr;
          that.tdWArr = tdWArr;
          // 调用第一个echarts图表
          let lefChart = that.$echarts.init(document.getElementById('lef-echarts'));
          // that.fristEcharts(myChart)
          let arrLef = [{
            name: 'Actual',
            type: 'line',
            smooth: true,
            data: [98.76, 96.69, 94.49, 95.19, 96.13, 95.19, 76.5, 89.24, 93.2, 81.89, 81.89, 93.38, 134.97, 40.15, 95.77, 98.33, 97.11, 88.23, 90.23, 93.65, 92.44, 91.28, 80.21, 92.65, 85.71, 92.16, 94.56, 93.11, 109.21, 93.11, 109.21]
          },
            {
              name: 'Target(91.74)',
              type: 'line',
              symbol: 'none',
              smooth: true,
              data: [91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74]
            },

            {
              name: 'Challenge(93)',
              type: 'line',
              symbol: 'none',
              stack: '总量',
              data: [93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93]
            }, {
              name: 'YTD',
              type: 'bar',
              barWidth: 5,
              smooth: true,
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 90.08],
              // itemStyle: {
              //   color: 'green',
              // }
            }, {
              name: 'MTD',
              type: 'bar',
              barWidth: 5,
              smooth: true,
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 91.64],
              // itemStyle: {
              //   color: 'blue',
              // }
            }, {
              name: 'WTD',
              type: 'bar',
              barWidth: 5,
              smooth: true,
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 93.56],
              // itemStyle: {
              //   color: 'red',
              // }
            }]
          let lengDataLef = ['Actual', 'Target(91.74)', 'Challenge(93)', "WTD", "MTD", "YTD"]
          that.fristEchartsDatas(lefChart, lengDataLef, arrLef)
          // that.fristEchartsData(myChart,that.xarr,that.actual,that.target,that.challenge,that.tdArr,that.tdMArr,that.tdWArr)
          myChart.on('click', function (params) {
            that.centerDialogVisible = true
          })
        }).catch(err => {
        that.$message.error(err);
      })
    },
    methods: {
      tabBingFrist(val, index) {
        this.echartTabBigIndex = index;
        if (val === "zheng") {
          this.fristBigXiang = false;
          this.fristBigZheng = true;
          this.fristBigBing = false;
        } else if (val === "xiang") {
          this.fristBigXiang = true;
          this.fristBigZheng = false;
          this.fristBigBing = false;
        } else if (val === "bing") {
          this.fristBigXiang = false;
          this.fristBigZheng = false;
          this.fristBigBing = true;
        }
      },
      // 第一个图标上select变换时触发
      tabChange(e) {
        console.log(e);
        if (e === "zheng") {
          this.fristXiang = false;
          this.fristZheng = true;
          this.fristBing = false;
        } else if (e === "xiang") {
          this.fristXiang = true;
          this.fristZheng = false;
          this.fristBing = false;
        } else if (e === "bing") {
          this.fristXiang = false;
          this.fristZheng = false;
          this.fristBing = true;
        }
      },
      // 第二个图标上select变换时触发
      tabChangeTwo() {
      },
      // 第三个图标上select变换时触发
      tabChangeThree() {
      },
      tabFrist(val, index) {
        this.echartTabIndex = index;
        if (val === "zheng") {
          this.fristXiang = false;
          this.fristZheng = true;
          this.fristBing = false;
        } else if (val === "xiang") {
          this.fristXiang = true;
          this.fristZheng = false;
          this.fristBing = false;
        } else if (val === "bing") {
          this.fristXiang = false;
          this.fristZheng = false;
          this.fristBing = true;
        }
      },
      addEchart() {
        this.addVisible = true;
      },
      // 添加坐标回传回来的事件
      saveFun() {
        this.addVisible = false;
      },
      cancelFun() {
        this.addVisible = false;
      },
      // 点击echarts头部时触发
      echartck(val) {
        this.echartListVerify = true;
      },
      echartOptionCk(val) {
        this.echartListVerify = false;
        this.echartsValue = val;
      },
      // 获取线重点关注对象
      getSpot() {
        let clearTime = null;
        clearInterval(clearTime)
        let that = this;
        that.TeamhotSpotsList = [];
        let dateNum = that.value4
        that.$get('piTeamHotSpots/getSpots?type=2&dateNum=' + dateNum + '', null)
          .then((response) => {
            that.TeamhotSpotsList = response.data;
            if (that.TeamhotSpotsList.length > 4) {
              that.upArr(response.data)
            } else if (that.TeamhotSpotsList.length < 4) {
              that.numlist = 4 - that.TeamhotSpotsList.length;
            }
          }).catch(err => {
          that.$message.error(err);
        })
      },
      // 点击线重点关注
      txtck(val) {
        this.txtVerify = true;
        this.txt = val;
      },
      // 获取5s区域
      piFivesScores() {
        let that = this;
        that.piFivesScoresList = [];
        that.piFivesScoresNum = [];
        that.$post('piFivesScores/queryAll', null)
          .then((response) => {
            that.piFivesScoresList = response.data
            if (that.piFivesScoresList.length > 5) {
              that.upArr(response.data)
            } else {
              let num = 5 - that.piFivesScoresList.length;
              for (let i = 0; i < num; i++) {
                that.piFivesScoresNum.push({area: "", scores: "", auditScore: ""})
              }
            }
          }).catch(err => {
          that.$message.error(err);
        })
      },
      // 编辑5s区域
      pifChange(val) {
        let that = this;
        that.$post('piFivesScores/update', val)
          .then((response) => {
            this.$message({
              message: response.msg,
              type: 'success'
            });
            that.piFivesScores();
          }).catch(err => {
          that.$message.error(err);
        })
      },
      // 新增5s区域
      pifAddChange(val) {
        let that = this;
        that.$post('piFivesScores/add', val)
          .then((response) => {
            that.piFivesScores();
            if (response.resultCode===1) {
              this.$message({
                message: response.msg,
                type: 'success'
              });
            } else {
              that.$message.error(response.msg);
            }
          }).catch(err => {
          that.$message.error(err);
        })
      },
      // 获取sdca循环使用跟踪列表
      piSdcaUseTracking() {
        let that = this;
        that.piSdcaUseTrackingList = [];
        that.piSdcaUseTrackingNum = [];
        that.$post('piSdcaUseTracking/queryAll', null)
          .then((response) => {
            that.piSdcaUseTrackingList = response.data
            if (that.piSdcaUseTrackingList.length > 5) {
              that.upArr((response.data))
            } else {
              let num = 4 - that.piSdcaUseTrackingList.length;
              for (let i = 0; i < num; i++) {
                that.piSdcaUseTrackingNum.push({
                  equipProcessKpi: "",
                  fiveW: "",
                  at: "",
                  owd: "",
                  training: "",
                  sopOpl: "",
                  reactionPlan: "",
                  processMap: "",
                  checklist: "",
                  pmPlan: "",
                  equipBom: "",
                  spraeParts: "",
                  dmr: "",
                  sic: ""
                })
              }
            }
          }).catch(err => {
          that.$message.error(err);
        })
      },
      // 编辑sdca循环使用跟踪列表
      sdcaChange(val) {
        let that = this;
        that.$post('piSdcaUseTracking/update', val)
          .then((response) => {
            if (response.resultCode===1) {
              this.$message({
                message: response.msg,
                type: 'success'
              });
            } else {
              that.$message.error(response.msg);
            }
            that.piSdcaUseTracking()
          }).catch(err => {
          that.$message.error(err);
        })
      },

      sdcaAddChange(val) {
        let that = this;
        that.$post('piSdcaUseTracking/add', val)
          .then((response) => {
            if (response.resultCode===1) {
              this.$message({
                message: response.msg,
                type: 'success'
              });
            } else {
              that.$message.error(response.msg);
            }
            that.piSdcaUseTracking()
          }).catch(err => {
          that.$message.error(err);
        })
      },
      upArr(data) {
        let that = this;
        setInterval(function () {
          let spliceData = data.splice(0, 1);
          data.push(spliceData[0]);
        }, 30 * 60 * 1000)
      },
      // 瀑布图
      falls(myChart) {
        window.addEventListener("resize", function () {
          myChart.resize()
        })
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            // formatter: function (params) {
            //   var tar;
            //   if (params[1].value != '-') {
            //     tar = params[1];
            //   }
            //   else {
            //     tar = params[0];
            //   }
            //   return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
            // }
          },
          legend: {
            data: ['']
          },
          grid: {
            top: 30,
            bottom: 60,
            left: 60
          },
          xAxis: {
            type: 'category',
            splitLine: {show: false},
            axisLabel: {
              show: true,
              rotate: 70,
              textStyle: {
                // color: '#c3dbff',  //更改坐标轴文字颜色
                fontSize: 8      //更改坐标轴文字大小
              }
            },
            data: ["TOTAL", "Equipment", "Speed loss", "others", "LEF", "external cause", "OEE", "Overhaul", "Preventive", "maintenance", "Cleaning", "CIP", "Foaming", "Scrubbing", "Change over", "Start up", "Stop", "Miscellaneous", "GLY"]
          },
          yAxis: {
            type: 'value',
            max: 100,
            min: 0
          },
          series: [
            {
              name: '辅助',
              type: 'bar',
              stack: '总量',
              itemStyle: {
                normal: {barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)'},
                emphasis: {barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)'}
              },
              data: [-100, 94.45, 92.86, 92.66, -100, 87.19, -100, 86.34, 83.39, 83.39, 81.98, 80.56, 79.3, 74.7, 74.7, 74.7, 74.7,]
            },
            {
              name: 'HRB',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  // show: true,
                  position: 'bottom'
                }
              },
              data: [100, 5.55, 1.59, 0.2, 92.66, 5.47, 87.19, 0.85, 2.95, 0, 1.41, 1.42, 1.26, 4.6, 0, 0, 0, 74.71],
              itemStyle: {
                color: 'rgb(31,73,152)',
              }
            }
          ]
        })
      },
      // 正态分布图
      zhengtai(myChart) {
        window.addEventListener("resize", function () {
          myChart.resize()
        })
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },

          grid: {
            top: 30,
            bottom: 60,
            left: 60
          },
          // grid: {
          //   left: '10%',
          //   right: '10%',
          //   top:30,
          //   // bottom: 10,
          // },
          legend: {
            data: ['']
            // ['Actual','WTD','YTD']
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: {rotate: 70},
              data: ['filler', 'Soaker', 'Cov-Socker to Filler', 'Labeller', 'EBI', 'pasteurizer', 'Palatizer', 'Cov-pasteurizer to ...', 'Carton Seamer', 'FBI Filler', 'Carton Maker', 'Bottle Depal', 'Caser plastic', 'Cov-Filler to...', 'Cov-labeller to Caser', 'FCI', 'cOV-Start to Scoker', 'FBI Labeller', 'Cov-Caser to pal'],
              // ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                show: true,
                rotate: 70,
                textStyle: {
                  // color: '#c3dbff',  //更改坐标轴文字颜色
                  fontSize: 8      //更改坐标轴文字大小
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  // color: 'white',
                  width: 0,
                  type: ''
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              min: 0,
              max: 2000,
              interval: 200,
              axisLabel: {
                formatter: '{value}'
              },
              splitLine: {
                show: true,
                lineStyle: {
                  // color: 'white',
                  width: 0,
                  type: ''
                }
              }
            },
            {
              type: 'value',
              name: '',
              min: 0,
              max: 120,
              interval: 20,
              axisLabel: {
                formatter: '{value}'
              },
              splitLine: {
                show: true,
                lineStyle: {
                  // color: 'white',
                  width: 0,
                  type: ''
                }
              }
            }
          ],
          series: [
            {
              name: 'Proportion',
              type: 'bar',
              data: [1800, 1700, 1300, 700, 650, 600, 600, 550, 500, 400, 400, 350, 350, 350, 120, 120, 80, 80, 10],
              itemStyle: {
                color: 'rgb(91,155,213)',
              },
            },
            {
              name: 'YTD',
              type: 'line',
              yAxisIndex: 1,
              smooth: true,
              symbol: 'none',
              itemStyle: {
                color: 'rgb(237,125,79)',
              },
              data: [20, 39, 53, 60, 67, 72, 77, 82, 86, 89, 92, 94, 96, 98, 99, 99, 100, 100, 100, 100]
            }
          ]
        })
      },
      // 饼图
      simple(myChart) {
        window.addEventListener("resize", function () {
          myChart.resize()
        })
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}%"
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '85%',
              center: ['48%', '50%'],
              itemStyle: {
                normal: {
                  label: {
                    show: false   //隐藏标示文字
                  },
                  labelLine: {
                    show: false   //隐藏标示线
                  }
                }
              },
              data: [
                {value: 41, name: '卡盖处理'},
                {value: 5, name: '灌酒信号不同步电调整'},
                {value: 3, name: '二次背压阀信号不对调整'},
                {value: 3, name: '主机脉冲接近开关接头老化处理'},
                {value: 4, name: '定中罩掉处理'},
                {value: 5, name: '酒阀窜酒处理'},
                {value: 8, name: '处理满瓶'},
                {value: 9, name: '压盖调整'},
                {value: 11, name: '托瓶气缸不升起处理'},
                {value: 11, name: '空瓶处理'}
              ],
            }
          ]
        })
      },
      // 箱线图
      Experiment(myChart) {
        window.addEventListener("resize", function () {
          myChart.resize()
        })
        let arr = [
          [0, 655, 850, 940, 980, 1070],
          [1, 760, 800, 845, 885, 960],
          [2, 780, 840, 855, 880, 940],
          [3, 720, 767.5, 815, 865, 920]
        ]
        let xarr = ["expr0", "wxpr1", "expr2", "expr3"]

        myChart.setOption({
          title: [
            // {
            //   text: 'Michelson-Morley Experiment',
            //   left: 'center',
            // },
            // {
            //   text: 'upper: Q3 + 1.5 * IRQ \nlower: Q1 - 1.5 * IRQ',
            //   borderColor: '#999',
            //   borderWidth: 1,
            //   textStyle: {
            //     fontSize: 14
            //   },
            //   left: '10%',
            //   top: '90%'
            // }
          ],
          legend: {
            data: ['line', 'line2', 'line3']
          },
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'shadow'
            }
          },

          grid: {
            left: '10%',
            right: '5%',
            top: 30,
            bottom: 50,
          },
          // grid: {
          //   left: '0%',
          //   right: '0%',
          //   top:30,
          //   // bottom: "6%",
          //   // bottom: "10%",
          // },
          xAxis: {
            type: 'category',
            data: xarr,
            boundaryGap: true,
            nameGap: 30,
            splitArea: {
              show: false
            },
            axisLabel: {
              formatter: 'expr {value}'
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            name: 'min',
            splitArea: {
              show: true
            }
          },
          series: [
            {
              name: 'boxplot',
              type: 'boxplot',
              data: arr,
              // tooltip: {
              //     formatter: function (param) {
              //         return [
              //             'Experiment ' + param.name + ': ',
              //             'upper: ' + param.data[4],
              //             'Q3: ' + param.data[3],
              //             'median: ' + param.data[2],
              //             'Q1: ' + param.data[1],
              //             'lower: ' + param.data[0]
              //         ].join('<br/>')
              //     }
              // }
            },
            {
              name: 'outlier',
              type: 'scatter',
              data: xarr
            }
          ]
        })
      },
      // echarts 柱状
      twoEcharts(myChart) {
        window.addEventListener("resize", function () {
          myChart.resize()
        })
        myChart.setOption({
          backgroundColor: '#fff',
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          grid: {
            left: '0%',
            right: '0%',
            bottom: "10%",
            containLabel: true
          },
          dataset: {
            source: [
              ['product', '超时完成', '按时完成',],
              ['一月', 43.3, 85.8],
              ['二月', 83.1, 73.4],
              ['三月', 86.4, 65.2],
              ['四月', 72.4, 53.9],
              ['五月', 72.4, 53.9],
              ['六月', 72.4, 53.9],
              ['七月', 72.4, 53.9],
              ['八月', 72.4, 53.9],
              ['九月', 72.4, 53.9],
              ['十月', 72.4, 53.9],
              ['十一月', 72.4, 53.9],
              ['十二月', 72.4, 53.9]
            ]
          },
          xAxis: {
            type: 'category',
          },
          yAxis: {
            type: 'value'
          },
          yAxis: {},
          series: [
            {type: 'bar'},
            {type: 'bar'}
          ]
        })
      },
      // echarts 折线
      // 接口
      fristEchartsData(myChart, xarr, dataOne, dataTwo, dataThree, dataFour, tdMArr, tdWArr) {
        window.addEventListener("resize", function () {
          myChart.resize()
        })
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        myChart.setOption({
          backgroundColor: "#fff",
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['Actual', 'Target(80)', 'challenge']
          },
          grid: {
            top: 70,
            bottom: 50,
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[1]
                }
              },
              axisPointer: {},
              data: xarr
            },
            {
              type: 'category',
              axisTick: {},
              axisLine: {
                lineStyle: {}
              },
              data: []
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Actual',
              type: 'line',
              xAxisIndex: 1,
              smooth: true,
              data: dataOne
            },
            {
              name: 'Target(80)',
              type: 'line',
              smooth: true,
              data: dataTwo
            }, {
              name: 'challenge',
              type: 'line',
              smooth: true,
              data: dataThree
            }, {
              name: 'YTD',
              type: 'bar',
              smooth: true,
              data: dataFour,
              itemStyle: {
                color: 'green',
              }
            }, {
              name: 'MTD',
              type: 'bar',
              smooth: true,
              data: tdMArr,
              itemStyle: {
                color: 'blue',
              }
            }, {
              name: 'YTD',
              type: 'bar',
              smooth: true,
              data: tdWArr,
              itemStyle: {
                color: 'red',
              }
            },
          ]
        })
      },
      // 死数据
      fristEcharts(myChart) {
        window.addEventListener("resize", function () {
          myChart.resize()
        })
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        myChart.setOption({
          backgroundColor: "#fff",
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['Actual', 'Target(80)', 'Challenge(100)', "WTD", "MTD", "YTD"]
          },
          grid: {
            top: 70,
            bottom: 50,
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[1]
                }
              },
              axisPointer: {},
              data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 23, 26, 27, 28, 29, 30, 31, "WTD", "MTD", "YTD"]
            },
            {
              type: 'category',
              axisTick: {},
              axisLine: {
                lineStyle: {}
              },
              data: []
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Actual',
              type: 'line',
              smooth: true,
              data: [80, 180, 80, 80, 80, 80, 180, 80, 80, 180, 80, 80, 80, 180, 80, 80, 80, 180, 180, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80]
            },
            {
              name: 'Target(80)',
              type: 'line',
              smooth: true,
              data: [80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80]
            },

            {
              name: 'Challenge(100)',
              type: 'line',
              stack: '总量',
              data: [10, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
            },
            {
              name: 'WTD',
              type: 'bar',
              stack: '总量',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 210, 0, 0]
            },
            {
              name: 'MTD',
              type: 'bar',
              stack: '总量',
              symbol: 'none',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 300, 0]
            },
            {
              name: 'YTD',
              type: 'bar',
              stack: '总量',
              symbol: 'none',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 144]
            },
          ]
        })
      },
      fristEchartsDatas(myChart, legendData, serveData) {
        window.addEventListener("resize", function () {
          myChart.resize()
        })
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        myChart.setOption({
          backgroundColor: "#fff",
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            formatter: function (params) {
              var relVal = params[0].name;
              for (var i = 0, l = params.length; i < l; i++) {
                if (params[i].seriesName == "Actual") {
                  relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                  // relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value+"%";
                } else {
                  relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                }

              }
              return relVal;
            }
          },
          legend: {
            data: legendData
          },

          // visualMap: {
          //   show: true,
          //   pieces: [{
          //     lte: 90,
          //     color: 'red'
          //   }, {
          //     gt: 90,
          //     color: 'green'
          //   }],
          //   // seriesIndex: 0
          // },
          grid: {
            top: 70,
            bottom: 50,
            left: 60
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                show: true,
                rotate: 70,
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[1]
                }
              },
              axisPointer: {},
              data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 23, 26, 27, 28, 29, 30, 31, "WTD", "MTD", "YTD"]
            },
            {
              type: 'category',
              axisTick: {},
              axisLine: {
                lineStyle: {}
              },
              axisLabel: {
                show: true,
                rotate: 70,
              },
              data: []
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: serveData,
          // visualMap: [
          //   {
          //     show: false,
          //     pieces: [{
          //       gt: 0,
          //       lt: 90,
          //       color: 'red',
          //     },{
          //       gte: 1800,
          //       lt: 2800,
          //       color: 'green',
          //     }],
          //     outOfRange: {
          //       color: '#FF5D1D',
          //     },
          //   },
          // ],
        })
      },
      // 全屏事件
      handleFullScreen() {
        let element = document.documentElement;
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },
      // 滑动事件
      swiperleft: function () {
        // this.$router.push({path: "./packaging"});
      },
      swiperright: function () {
        // this.$router.push({path: "./packaging"});
      },
      //页面15分钟无操作时返回首页
      startTimer() {
        let that = this;
        that.pathLink()
      },
      pathLink() {
        let that = this;
        setInterval(function () {
          // 执行的操作
          console.log("触发");
          // that.$router.push({path: './packaging'});
        }, 5 *

          1000)
      },
      isTimeOut() {
        let that = this;
        // if(that.$route.path == "/") {
        that.startTimer();
        // }
        document.body.onmouseup = that.startTimer;
        document.body.onmouseup = that.startTimer;
        document.body.onmousemove = that.startTimer;
        document.body.onkeyup = that.startTimer;
        document.body.onclick = that.startTimer;
        document.body.ontouchend = that.startTimer;
      },
      // 放大echarts
      amplification(val) {
        let that = this;
        if (val == 'frist') {
          that.frist = true;
          that.fristTop = true;
          const loading = that.$loading({
            lock: true,
            text: '拼命加载中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          setTimeout(function () {
            loading.close();
            let myCharts = that.$echarts.init(document.getElementById('echarts'));
            let arr = [{
              name: 'Actual',
              type: 'line',
              smooth: true,
              data: [98.76, 96.69, 94.49, 95.19, 96.13, 95.19, 76.5, 89.24, 93.2, 81.89, 81.89, 93.38, 134.97, 40.15, 95.77, 98.33, 97.11, 88.23, 90.23, 93.65, 92.44, 91.28, 80.21, 92.65, 85.71, 92.16, 94.56, 93.11, 109.21, 93.11, 109.21]
            },
              {
                name: 'Target(91.74)',
                type: 'line',
                smooth: true,
                symbol: 'none',
                data: [91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74, 91.74]
              },

              {
                name: 'Challenge(93)',
                type: 'line',
                stack: '总量',
                symbol: 'none',
                data: [93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93]
              }, {
                name: 'YTD',
                type: 'bar',
                smooth: true,
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 90.08],
                // itemStyle: {
                //   color: 'green',
                // }
              }, {
                name: 'MTD',
                type: 'bar',
                smooth: true,
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 91.64],
                // itemStyle: {
                //   color: 'blue',
                // }
              }, {
                name: 'WTD',
                type: 'bar',
                smooth: true,
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 93.56],
                // itemStyle: {
                //   color: 'red',
                // }
              }]
            let lengData = ['Actual', 'Target(91.74)', 'Challenge(93)', "WTD", "MTD", "YTD"]
            that.fristEchartsDatas(myCharts, lengData, arr)
            // that.fristEcharts(myCharts)
            // that.fristEchartsData(myCharts,that.xarr,that.actual,that.target,that.challenge,that.tdArr,that.tdMArr,that.tdWArr)
            myCharts.on('click', function (params) {
              that.centerDialogVisible = true
            })
            // that.fristEcharts(myCharts)
            let echartsFooter = that.$echarts.init(document.getElementById('echarts-footer'));
            // that.zhengtai(echartsFooter)
            that.falls(echartsFooter)
            echartsFooter.on('click', function (params) {
              // alert("a")
              that.frist = false;
              that.three = false;
              // setTimeout(function(){
              that.two = true;
              let echartsFooterTwo = that.$echarts.init(document.getElementById('echarts-footer-two'));
              that.zhengtai(echartsFooterTwo)
              echartsFooterTwo.on('click', function (params) {
                console.log("aaa")
                that.frist = false;
                that.two = false;
                that.three = true;
                // setTimeout(function(){
                let echartsFooterThree = that.$echarts.init(document.getElementById('echarts-footer-three'));
                that.simple(echartsFooterThree)
                // },500)
              })
              // },500)
            })
          }, 500)
        } else if (val == 'two') {
          that.two = true;
          that.twoTop = true;
          setTimeout(function () {
            let bigTwoCharts = that.$echarts.init(document.getElementById('echarts-two'));
            let arrTwo = [{
              name: 'Actual',
              type: 'line',
              smooth: true,
              data: [96.39, 93.55, 90.40, 92.29, 92.71, 75.72, 62.38, 83.43, 85.55, 85.55, 60.68, 88.2, 39.87, 14.34, 86.09, 91.02, 91.02, 53.53, 81.9, 86.31, 86.31, 79.14, 47.71, 81.46, 79.89, 61.74, 90.72, 84.82, 83.79, 84.82, 83.79]
            },
              {
                name: 'Target(73.5)',
                type: 'line',
                smooth: true,
                symbol: 'none',
                data: [73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5, 73.5]
              },

              {
                name: 'Challenge(75)',
                type: 'line',
                stack: '总量',
                symbol: 'none',
                data: [75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75]
              }, {
                name: 'YTD',
                type: 'bar',
                smooth: true,
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73.62],
              }, {
                name: 'MTD',
                type: 'bar',
                smooth: true,
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77.41],
                // itemStyle: {
                //   color: 'blue',
                // }
              }, {
                name: 'WTD',
                type: 'bar',
                smooth: true,
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 80.23],
              }]
            let lengDataTwo = ['Actual', 'Target(73.5)', 'Challenge(75)', "WTD", "MTD", "YTD"]
            that.fristEchartsDatas(bigTwoCharts, lengDataTwo, arrTwo)
            // that.fristEcharts(bigTwoCharts)
            let echartsFooterTwo = that.$echarts.init(document.getElementById('echarts-footer-two'));
            that.zhengtai(echartsFooterTwo)

            echartsFooterTwo.on('click', function (params) {
              console.log("aaa")
              that.frist = false;
              that.two = false;
              that.three = true;
              // setTimeout(function(){
              let echartsFooterThree = that.$echarts.init(document.getElementById('echarts-footer-three'));
              that.simple(echartsFooterThree)
              // },500)
            })
          }, 500)
        } else if (val == 'three') {
          that.three = true;
          that.threeTop = true;
          setTimeout(function () {
            let bigthreemyChart = that.$echarts.init(document.getElementById('echarts-three'));
            let arrThree = [{
              name: 'Actual',
              type: 'line',
              smooth: true,
              data: [4256.58, 4256.58, 3992.28, 4075.74, 4094.35, 3343.85, 3410.78, 3604.17, 3695.81, 2495.23, 2621.37, 3810.24, 1220.07, 401.76, 3615.84, 3823.2, 3654.72, 2254.36, 3538.08, 3728.59, 3728.59, 3418.84, 3418.84, 3418.84, 3355.38, 2726.43, 4006.19, 3745.87, 3745.87, 3745.87, 3745.87]
            },
              {
                name: 'Target(114396)',
                type: 'line',
                smooth: true,
                symbol: 'none',
                data: [114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396, 114396]
              }, {
                name: 'YTD',
                type: 'bar',
                smooth: true,
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 441191.86],
                // itemStyle: {
                //   color: 'green',
                // }
              }, {
                name: 'MTD',
                type: 'bar',
                smooth: true,
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 94826.9],
              }, {
                name: 'WTD',
                type: 'bar',
                smooth: true,
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 19876.39],
              }
            ]
            let lengDataThree = ['Actual', 'Target(114396)', 'Challenge(90)', "WTD", "MTD", "YTD"]
            that.fristEchartsDatas(bigthreemyChart, lengDataThree, arrThree)
            // that.fristEcharts(bigthreemyChart)
            let echartsFooterThree = that.$echarts.init(document.getElementById('echarts-footer-three'));
            // that.zhengtai(echartsFooterThree)
            that.simple(echartsFooterThree)
          }, 500)
        }
        that.apcVerify = true;
        that.apcContentVerify = false;
      },
      posf() {
        this.apcVerify = false;
        this.centerDialogVisible = false;
        this.frist = false;
        this.two = false;
        this.three = false;
        this.fristTop = false;
        this.twoTop = false;
        this.threeTop = false;
      },
      // 关闭放大echarts
      close() {
        this.frist = false;
        this.two = false;
        this.three = false;
        this.fristTop = false;
        this.twoTop = false;
        this.threeTop = false;
        this.apcVerify = false;
        this.apcContentVerify = true;
        this.centerDialogVisible = false;
      },
      // 弹出框 周月年
      dateCk(index) {
        this.tabIndex = index;
      },
      //下拉回传回来的方法
      selectsFun(val) {
        this.fileVerify = false;
      },
      // 获取当前时间
      getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      },
      // 点击左侧tab
      tabLefts(index) {
        this.tabLeftIndex = index;
        if (index === 0) {
          this.tabAddress = false;
          this.tabFor = true;
          this.tabFive = false;
        } else if (index === 1) {
          this.tabAddress = true;
          this.tabFor = false;
          this.tabFive = false;
        } else {
          this.tabAddress = false;
          this.tabFor = false;
          this.tabFive = true;
        }
      },
      // 退出
      quit() {
        // this.$post('logout', null)
        //   .then((response) => {
        //     console.log(response);
        //   }).catch(err => {
        //   this.$message.error(err);
        // })
        window.location.href = "/"
      },
    },

  }
</script>

<style scoped>
  .menu-container {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 20px 0 20px;
  }

  .content-border {
    width: 100%;
    border: 2px solid #325194;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    z-index: 9999;
  }

  .header-title {
    display: flex;
    text-align: left;
    justify-content: space-between;
  }

  .header-logo {
    position: relative;
    width: 27%;
    display: flex;
    align-items: center;
    height: 50px;
  }

  .header-logo-img {
    width: 83px;
    height: 33px;
  }

  .header-header-title {
    width: 76%;
    height: 50px;
    text-align: left;
    color: #325194;
    font-weight: bold;
    letter-spacing: 2px;
    margin-left: 26%;
  }

  .text-width {
    width: 174px;
    text-align: center;
    position: relative;
  }

  .header-vpo {
    width: 8%;
    height: 50px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 10px;
    position: relative;
  }

  .table-content {
    display: flex;
    width: 80%;
  }

  .table-left {
    width: 76.7%;
    height: 181px;
    border: 1px solid #325194;
    overflow: hidden;
  }

  .table-center {
    width: 13%;
    border: 1px solid #325194;
  }

  .table-right {
    width: 92%;
    border: 1px solid #325194;
  }

  .table-left-title {
    display: flex;
    height: 30px;
    background-color: #325194;
    font-size: 12px;
    text-align: center;
    color: #fff;
  }

  .table-center-title {
    height: 30px;
    background-color: #325194;
    font-size: 12px;
    text-align: center;
    color: #fff;
  }

  .table-left-title-left, .table-left-content-left {
    width: 54%;
  }

  .table-left-title-center, .table-left-content-center {
    width: 23%;
  }

  .table-left-title-right, .table-left-content-right {
    width: 23%;
  }

  .table-left-content {
    display: flex;
    overflow: hidden;
  }

  .table-left-content section {
    border: 1px solid #cecece;
    border-left: none;
    border-top: none;
    height: 30px;
    line-height: 30px;
  }

  .table-left-content section:last-child {
    border-right: none;
  }

  .table-center-th {
    display: flex;
  }

  .table-center-th-content {
    flex: 1;
    padding-top: 5px;
    color: #fff;
    background-color: #248ec2;
    font-size: 12px;
    border: 1px dashed #fff;
    height: 37px;
  }

  .tds {
    border: 1px dashed #fff;
    color: #fff;
    font-size: 12px;
    background-color: #1a8dc4;
    height: 31px;
  }

  .td-content {
    font-size: 12px;
    height: 29.5px;
    border: 1px solid #cecece;
    border-bottom: none;
    border-right: none;
  }

  .td-content:first-child {
    border-left: none;
  }

  .last-table-content {
    display: flex;
    margin-top: 10px;
  }

  .last-table-left {
    width: 77.7%;
    height: 196px;
    border: 1px solid #325194;
  }

  .last-table-center {
    width: 13%;
    margin-left: 0.3%;
    border: 1px solid #325194;
  }

  .last-table-left-content {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    height: 37px;
  }

  .last-td {
    border: 1px solid #cecece;
    border-top: none;
    color: #fff;
    font-size: 12px;
    background-color: #248ebe;
    height: 30px;
  }

  .last-td:nth-child(1) {
    width: 32%;
  }

  .last-td:nth-child(2) {
    width: 32%;
  }

  .last-td:nth-child(3) {
    width: 12%;
  }

  .last-td:nth-child(4) {
    width: 14%;
  }

  .last-td:nth-child(5) {
    width: 10%;
    border-right: none;
  }

  .last-td-content {
    font-size: 12px;
    height: 33px;
    border-right: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
  }

  #lef-echarts, #gly-echarts, #yield-echarts {
    width: 30vw;
    height: 210px;
    z-index: 9;
  }

  .apc-dlg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    z-index: 999;
    margin: 0 auto;
  }

  .echarts-content {
    position: absolute;
    /*top: 20%;*/
    width: 120vw;
    /*height: 60vh;*/
    background-color: #fff;

  }

  #echarts, #echarts-two, #echarts-three, #echarts-footer, #echarts-footer-two, #echarts-footer-three, #echarts-footer-tab, #echarts-footer-tabTwo {
    border-radius: 5px;
    width: 105vw;
    height: 40vh;
  }

  .echarts-title {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #fff;
    text-align: left;
    box-sizing: border-box;
    padding-left: 50px;
    display: flex;
    justify-content: space-between;
  }

  .echarts-title-name {
    border-bottom: 1px solid #c72f00;
    color: #c72f00;
    height: 50px;
    line-height: 50px;
    width: 30%;
  }

  .dates {
    position: absolute;
    top: 50px;
    right: 0;
    background-color: #fff;
    z-index: 9999;
  }

  .dates div {
    padding: 5px 10px
  }

  .bcg {
    background-color: #ebebe3;
    padding: 5px 10px
  }

  .sdcaxh {
    width: 90%;
    height: 86%;
    text-align: center;
  }

  .posfixed {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 999;
  }

  .loadings {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 9999;
  }

  .txt {
    background-color: #fff;
    width: 50vw;
    height: 30vh;
    margin: 20vh auto;
    padding: 30px;
    border-radius: 5px;
    font-size: 16px;
  }

  .file-div {
    position: absolute;
    top: 20px;
    border: 1px solid #325194;
    left: 3vw;
    background-color: #fff;
    z-index: 96;
  }

  .echart-header-title {
    position: absolute;
    top: 45px;
    left: 12px;
    z-index: 998;
    color: #325194;
    font-size: 13px;
    font-weight: bold
  }

  .echart-header-select {

  }

  .echart-header-select div {
    border: 1px solid #c72f00;
    background: #fff;
    color: #000;
  }

  .echarts-error {
    z-index: 998;
    width: 30%;
    margin-right: 20vw;
    display: flex;
  }

  .echarts-error-content {
    display: flex;
    align-items: center;
    margin-top: 5px;
  }

  .echarts-error-index {
    color: #fff;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background: #c52d00;
    border-radius: 50%;
    margin-right: 5px;
  }

  .tab-left {
    text-align: left;
    font-size: 14px;
    background-color: #1a8dc4;
    /*padding: 6px 20px;*/
    width: 100px;
    height: 31px;
    line-height: 31px;
    box-sizing: border-box;
    padding-left: 10px;
    color: #fff;
  }

  .tab-left-active {
    text-align: left;
    font-size: 14px;
    background-color: #fff;
    width: 100px;
    height: 31px;
    line-height: 31px;
    box-sizing: border-box;
    padding-left: 10px;
    /*padding: 6px 20px;*/
    color: #000;
  }

  .header-organ {
    height: 57px;
    position: absolute;
    right: 160px;
    top: 14px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    width: 100px;
  }

  .quit {
    width: 57px;
    height: 57px;
    position: absolute;
    right: 120px;
    top: 14px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
  }

  #zhengtai, #xiangxian, #zhengtaitwo, #frist-xiang, #frist-bing {
    height: 170px;
    width: 30vw;
    margin-top: -20px;
  }

  .big-echarts {
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  .tab-echarts {
    /*box-shadow: 0px 5px 10px #aaa;*/
    width: 150px;
    height: 25px;
    position: absolute;
    top: -45px;
    z-index: 9;
  }

  .tab-echarts-title {
    width: 50px;
    height: 25px;
    text-align: center;
  }

  .echartsActive {
    background-color: #aaaaaa;
    color: #fff;
  }
</style>

